﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
<link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<link href="Content/ui.textbox.css" type="text/css" rel="stylesheet"  media="all" />
<link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
<link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
<link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />

<script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>   
<script src="Scripts/jquery.form.js" type="text/javascript"></script>
<script src="Scripts/ui.textbox.js" type="text/javascript"></script>
<script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>

<!-- InstanceBeginEditable name="pageStyles" -->
    <style type="text/css">
        .formBox
        {
            background: none repeat scroll 0 0 #E5E5E5;
            padding: 1em;
        }
        .calendar-blank
        {
            background: url("Content/images/calendar_blank.png") no-repeat scroll 0 0 transparent;
            cursor: pointer;
            display: inline-block;
            height: 22px;
            margin-bottom: -4px;
            margin-left: 4px;
            margin-right: 4px;
            width: 22px;
        }
    </style>
    <!-- InstanceEndEditable -->
    
<!-- InstanceBeginEditable name="pageScripts" -->
<script type="text/javascript">
    //************* URL常量

    var URL_APPLY_LEAVE = '/attendance/DoApplyLeave';

    //************* 全局变量

    var g_Var = {
        'leaveTypeDefault': '请选择请假类型...',
        'dateTimeBegin': null,
        'dateTimeEnd': null,
        'dateNow': null

    };
    var StaticResource = { 'redirectRemind': '3秒后将自动跳转到请假信息页.', 'failureRemind': '信息提交失败,请重新提交.' };

    //************* 常量定义


    //************* Accessor访问器

    if (ezmock.IS_MOCKED) {

        var mock_TypeJson = [{ "Id": "a8c3b71b-aa58-43c2-854a-1d632ee67d69", "LeaveTypeName": "其它", "IsForWork": false, "Remark": null },
                             { "Id": "06932c6a-c358-40e9-b583-21e98e4bce43", "LeaveTypeName": "病假", "IsForWork": false, "Remark": null },
                             { "Id": "3e58acf8-9c41-4df9-90ea-46c41a8a8668", "LeaveTypeName": "调休", "IsForWork": false, "Remark": "" },
                             { "Id": "6d440982-1a18-49ae-b7db-5bd9e1406da4", "LeaveTypeName": "产假", "IsForWork": false, "Remark": "" },
                             { "Id": "9c0e5dc7-a223-4531-9103-717aa68c024b", "LeaveTypeName": "事假", "IsForWork": false, "Remark": "" },
                             { "Id": "c02d31ec-91f8-451c-9013-74e386fa2997", "LeaveTypeName": "婚假", "IsForWork": false, "Remark": "" },
                             { "Id": "c7615898-2739-4c33-a8dc-a1451537b170", "LeaveTypeName": "外出", "IsForWork": true, "Remark": "在本市内外出办事的情况" },
                             { "Id": "494c6766-66f2-4831-89e8-a14937febf47", "LeaveTypeName": "年假", "IsForWork": false, "Remark": "公司规定的年假" },
                             { "Id": "5ecb8974-3890-4d48-8f05-b01bf55f5b18", "LeaveTypeName": "检假", "IsForWork": false, "Remark": "" },
                             { "Id": "2140a9d5-3149-44c5-9f2c-f6fa7f3913b5", "LeaveTypeName": "出差", "IsForWork": true, "Remark": ""}];

        var mock_CurrentTime = { 'CurrentTime': '1280423559' };

        var mockEzAccessor = {
            'doApplyLeave': function () {
                var stateInfo = { 'State': 'Success', 'Info': '申请成功！', 'Date': null };
                $.displayStateInfo(stateInfo);
            },
            'getUserId': function () {
                return '4d2d80d1-48cb-4661-8127-4a8e3db67760';
            },
            'getLeaveType': function () {
                return mock_TypeJson;
            },
            'getBasicInfo': function () {
                g_Var['dateNow'] = Date.fromEpoch(mock_CurrentTime['CurrentTime']);
            }
        };
        EzAccessor = mockEzAccessor;
    } else {
        var realEzAccessor = {
            'doApplyLeave': function (dateTimeBegin, dateTimeEnd, leaveTypeId, description) {
                $(document).ajaxBusy('begin');
                $('#btnSubmit').button('option', 'disabled', true);
                $('#leaveReason').attr('disabled', true);
                $.post(
                    URL_APPLY_LEAVE,
                    { 'dateTimeBegin': dateTimeBegin,
                        'dateTimeEnd': dateTimeEnd,
                        'leaveTypeId': leaveTypeId,
                        'description': description
                    },
                    function (e) {
                        var userId = EzAccessor.getUserId();
                        $(document).ajaxBusy('end');
                        if (e.State == 'Success') {
                            e['Info'] = e['Info'] + StaticResource['redirectRemind'];
                            setTimeout(function () {
                                window.location.href = "personalLeaveInfoList?UserId=" + userId + "&CurrentTime=" + dateTimeBegin;
                            }, 1000);
                        } else {
                            e['Info'] = StaticResource['failureRemind'];
                            $('#btnSubmit').button('option', 'disabled', false);
                            $('#leaveReason').attr('disabled', false);
                        }
                        $.displayStateInfo(e);
                    }
                );
            },
            'getUserId': function () {
                //return '<%= ViewData["UserId"] %>';
            },
            'getLeaveType': function () {
                //return <%= ViewData["LeaveTypeList"] %>;
            },

            'getBasicInfo': function () {
                //g_Var['dateNow'] = Date.fromEpoch(<%= ViewData["CurrentTime"] %>);
            }
        };
        EzAccessor = realEzAccessor;
    }


    //刷新时间
    function refreshCurrentDateTime() {
        var timeBegin = $('#timeBegin').timePicker('getTime');
        var timeEnd = $('#timeEnd').timePicker('getTime');

        var dateBegin = $('#dateBegin').datepicker('getDate');
        var dateEnd = $('#dateEnd').datepicker('getDate');

        g_Var['dateTimeBegin'] = new Date(
            dateBegin.getFullYear(),
            dateBegin.getMonth(),
            dateBegin.getDate(),
            timeBegin.getHours(),
            timeBegin.getMinutes(),
            0
            );
        g_Var['dateTimeEnd'] = new Date(
            dateEnd.getFullYear(),
            dateEnd.getMonth(),
            dateEnd.getDate(),
            timeEnd.getHours(),
            timeEnd.getMinutes(),
            0
            );

    }


    function dateTimeBeginChanged() {
        refreshCurrentDateTime();

        if (g_Var['dateTimeBegin'] > g_Var['dateTimeEnd']) {
            var timeTarget = new Date(g_Var['dateTimeBegin']);

            $('#dateEnd').datepicker('setDate', timeTarget);
            $('#timeEnd').timePicker('setTime', g_Var['dateTimeBegin']);
        }
    }


    function dateTimeEndChanged(currentTime) {
        refreshCurrentDateTime(currentTime);

        if (g_Var['dateTimeBegin'] > g_Var['dateTimeEnd']) {

            var dateBegin = new Date(g_Var['dateTimeBegin']);
            $('#dateEnd').datepicker('setDate', dateBegin);
            $('#timeEnd').timePicker('setTime', g_Var['dateTimeBegin']);
            EzTipsManager.showTipBox('tipAlert');

            setTimeout(function () {
                EzTipsManager.hideTipBox('tipAlert');
            }, 3000);
        }
    }


    //初始化假期开始时间
    function initiDateBegin() {

        $('#dateBegin')
		   .wdatepicker({
		       onSelect: function (dataText, inst) {
		           dateTimeBeginChanged();
		       }
		   })
		   .val(g_Var['dateNow'].toChineseDateFormat());

        $('#timeBegin').timePicker({
            'select': function (event, currentTime) {
                dateTimeBeginChanged(currentTime)
            }
        });

        $('#timeBegin').timePicker("setTime", g_Var['dateNow']);


    }

    //初始化假期结束时间
    function initiDateEnd() {

        $('#dateEnd')
		   .wdatepicker({
		       onSelect: function (dataText, inst) {
		           dateTimeEndChanged();
		       }
		   })
		   .val(g_Var['dateNow'].toChineseDateFormat());

        $('#timeEnd').timePicker({
            'select': function (event, currentTime) {
                dateTimeEndChanged(currentTime);
            }

        });

        $('#timeEnd').timePicker("setTime", g_Var['dateNow']);
    }

    //初始化时间
    function initiTime() {
        
        EzAccessor.getBasicInfo();

        initiDateBegin();
        initiDateEnd();
    }

    //初始化页面
    function initPage() {
        $(document).ajaxBusy();
        var leaveType = EzAccessor.getLeaveType();

        $('#selectControl').comboxBindingWithEmptyDefault(leaveType, 'LeaveTypeName', 'Id', g_Var['leaveTypeDefault']);

        EzTipsManager.addTipBox('#tip_alert', 'tipAlert');

    }

    //初始化事件
    function initPageEvent() {
        $('#btnSubmit').click(function () {

            refreshCurrentDateTime();

            var dateTimeBeginToEpoch = g_Var['dateTimeBegin'].toEpoch();
            var dateTimeEndToEpoch = g_Var['dateTimeEnd'].toEpoch();
            var leaveTypeId = $('#selectControl').val();
            var leaveDescription = $('#leaveReason').val().htmlEncode();


            if (leaveTypeId == g_Var['leaveTypeDefault']) {
                var stateInfo = { 'State': 'Error', 'Info': '未填写请假类型!', 'Date': null };
                $.displayStateInfo(stateInfo);
                return;
            }

            EzAccessor.doApplyLeave(dateTimeBeginToEpoch, dateTimeEndToEpoch, leaveTypeId, leaveDescription);

        });

        $('#btnRecover').click(function () {
            //时间重置
            $('#timeEnd').timePicker("setTime", g_Var['dateNow']);
            $('#timeBegin').timePicker("setTime", g_Var['dateNow']);

            $('#dateBegin').val(g_Var['dateNow'].toChineseDateFormat());
            $('#dateEnd').val(g_Var['dateNow'].toChineseDateFormat());

            //假期类别
            $('#selectControl').val(g_Var['leaveTypeDefault']);

            //备注
            $('#leaveReason').clearFields();
        });

    }

    $(function () {
        initPage();
        initPageEvent();
        initiTime();

    });

</script>
<!-- InstanceEndEditable -->



<body>
<div id="root">
	<div id="headw">
    	<div id="head">
            <!-- InstanceBeginEditable name="pageHead" -->
			<p>
                早上好，杨裕欣(软件工程部)
		    </p>
            <div id="status-bar">
            <span><a href="#">设置</a></span>&nbsp;
            魏玛软件出品
            </div>
            <div id="tabs">
				<ul>
					<li><a class="current">第一栏</a></li>
					<li><a>第一栏</a></li>
					<li><a>第一栏</a></li>
				</ul>
			</div>
            <!-- InstanceEndEditable -->
        </div>
    </div>
    <div id="main">
    
    	<div id="contentw">
            <div id="content-page">
	        <!-- InstanceBeginEditable name="pageContent" -->
            <div id="page-head">
                <span>申请假期</span> <span style="font-size: 16px;" id="timeDisplay">
                    <div style="font-weight: bold; display: inline;" id="lblTime">
                    </div>
                </span>
            </div>
            <div id="page-body">
                <div class="formBox">
                    <ul class="fieldslist">
                        <li>
                            <div class="l">
                                <label>
                                    请假类型：
                                </label>
                            </div>
                            <div class="r">
                                <select id="selectControl" class="f-input" name="typeList" value="选择请假类别">
                                </select>
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    开始时间：
                                </label>
                            </div>
                            <div class="r">
                                <input id="dateBegin" />
                                <div id="timeBegin" style="display: inline-block;">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    结束时间：
                                </label>
                            </div>
                            <div class="r">
                                <input id="dateEnd" />
                                <div id="timeEnd" style="display: inline-block;">
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <label>
                                    请假原因：
                                </label>
                            </div>
                            <div class="r">
                                <textarea id="leaveReason" class="f-input" rows="3"></textarea>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="page-submit">
                <input id="btnSubmit" type="submit" value="提交申请" />
                &nbsp;或者&nbsp;<a id="btnRecover">重置</a>
            </div>
            <!-- InstanceEndEditable -->
            </div>
            <div id="content-foot"><small>这个是内容下面的脚注</small></div>
        </div>        
        
        <div id="tipsw">
	        <!-- InstanceBeginEditable name="pageShortcut" -->
                <div id="shortcuts" class="box">
                    <input id="Submit1" type="submit" value="个人假期查询" />
                </div>
            <!-- InstanceEndEditable -->            
            
            <div id="tips" class="box">
           	
            </div>
        </div>
        <div class="clearfloat"></div>
    </div> 
</div>
	    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_alert" style="display: none;">
        <span class="important">注意:假期开始时间必须早于假期结束时间!</span>
    </div>
    <!-- InstanceEndEditable -->    
</body>
<!-- InstanceEnd --></html>
